import { ref } from "vue";
import "./index.scss";
import titleBgImg from "./assets/21169.webp";
import sunIcon from "./assets/1071.svg";
import ElectricStatistics from "./ElectricStatistics";
import EfficiencyRanking from "./EfficiencyRanking";
import AlarmList from "./AlarmList";
import PowerStation from "./PowerStation";
import OPMA from "./OPMA";
import Card from "@/views/dashboard/ops2/Card";

export default defineComponent({
	name: "Index",
	setup() {
		const time = ref("");
		const date = ref<Date>(new Date());
		onBeforeMount(() => {
			setInterval(() => {
				date.value = new Date();
				time.value =
					date.value.getHours().toString().padStart(2, "0") +
					":" +
					date.value.getMinutes().toString().padStart(2, "0") +
					":" +
					date.value.getSeconds().toString().padStart(2, "0");
			}, 1000);
		});
		return () => (
			<div className={"back-ground-img w-[100vw] h-[100vh] box-border flex flex-col"}>
				<header className="w-full h-fit flex flex-row justify-between relative">
					<div className={"h-fit m-auto flex flex-row item.scss-center absolute left-8 top-[1.5rem]"}>
						<div className={"w-fit h-fit"}>
							<img className={"w-[22px] h-[22px]"} src={sunIcon} alt={""} />
						</div>
						<div className={"ml-2 text-white h-fit"}>晴 15~25℃</div>
					</div>
					<div className={"title h-fit w-full left-0 top-0 right-0 bottom-0 "}>
						<img className={"w-full"} src={titleBgImg} alt={""}></img>
					</div>
					<div className={"time h-fit flex flex-row text-white  justify-between items-center absolute right-6 top-[1rem] "}>
						<div>
							{date.value.getFullYear() +
								"." +
								(date.value.getMonth() + 1).toString().padStart(2, "0") +
								"." +
								date.value.getDay()}
						</div>
						<div className={"ml-2"}>{time.value}</div>
					</div>
				</header>
				<div className="w-full h-full px-5 pb-5 box-border">
					<div className="h-full w-full flex pb-3 ">
						<div className={"left w-1/4 h-full"}>
							<ElectricStatistics class={"w-full h-1/2"}></ElectricStatistics>
							<EfficiencyRanking class={"w-full h-1/2"}></EfficiencyRanking>
						</div>
						<div className={"center w-1/2 flex flex-col h-full box-border justify-end relative"}>
							<Card class={"absolute top-40 left-32"}></Card>
							<AlarmList class={"h-1/4 w-full "}></AlarmList>
						</div>
						<div className={"right w-1/4 h-full flex flex-col "}>
							<PowerStation class={"w-full "}></PowerStation>
							<OPMA class={"w-full h-full "} rate={80}></OPMA>
						</div>
					</div>
				</div>
			</div>
		);
	}
});
